<template>
    <div>
        <template v-for="(item,index) in basicForm">
            <a-form-model :ref="'basicForm'+index" layout="inline" :model="basicForm[index]" @cancel="()=>basicForm[index] = {}" :rules="basicRules">
                <a-collapse :activeKey="[1]">
                    <a-collapse-panel key="1" header = "数采仪" >
                        <a slot = "extra">
                          <template v-if="!$attrs.isHide">
                            <a-button @click.stop="onEdit(index)" size="small" type = "primary" icon = "edit" v-show="item.isEditButton">修改</a-button>
                            <a-button @click.stop="onDel(index)" size="small" type = "danger" icon = "delete" v-show="item.isEditButton">删除</a-button>
                            <a-button @click.stop="onCancel(index)" size="small"  icon = "close" v-show="!item.isEditButton">取消</a-button>
                            <a-button @click.stop="onSave(index)" size="small" type = "primary" icon = "check" v-show="!item.isEditButton">保存</a-button>
                          </template>

                        </a>
                        <a-row type="flex" justify="center">
                            <a-col :span="8">
                                <a-form-model-item  label="数采仪编码/MN号" prop="dataAcquisitionCode">
                                    <a-input v-model="item.dataAcquisitionCode" :disabled="item.isDisable"/>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item  label="数采仪型号" prop="dataAcquisitionModel">
                                    <a-input v-model="item.dataAcquisitionModel" :disabled="item.isDisable"/>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item  label="生产厂商" prop="creatFactoryName">
                                    <a-select v-model="item.creatFactoryName" :disabled="item.isDisable">
                                        <a-select-option value="暂无">
                                            暂无
                                        </a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row type="flex" justify="center">
                            <a-col :span="8">
                                <a-form-model-item  label="数据传输方式" prop="sendDataType">
                                    <a-select v-model="item.sendDataType" :disabled="item.isDisable">
                                        <a-select-option :value="detail.name" v-for="(detail,index) in sendDataType" :key="detail.id">
                                            {{detail.name}}
                                        </a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item  label="数据上报间隔(分钟)" prop="sendDataInterval" >
                                    <a-input v-model="item.sendDataInterval" :disabled="item.isDisable"/>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item  label="数据传输协议"  prop="sendDataAgreement" >
                                    <a-select v-model="item.sendDataAgreement" :disabled="item.isDisable">
                                      <a-select-option :value="detail.name" v-for="(detail,index) in sendDataAgreement" :key="detail.id">
                                        {{detail.name}}
                                      </a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row type="flex" justify="center">
                            <a-col :span="8">
                                <a-form-model-item  label="终端IP" prop="terminalOne">
                                    <a-input v-model="item.terminalOne" :disabled="item.isDisable"/>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item  label="端口号" prop="portOne">
                                    <a-input v-model="item.portOne" :disabled="item.isDisable"/>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item  label="访问密码" prop="visitPassword">
                                    <a-input v-model="item.visitPassword" :disabled="item.isDisable"/>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row type="flex" justify="center">
                            <a-col :span="8">
                                <a-form-model-item  label="终端IP1" prop="terminalTow">
                                    <a-input v-model="item.terminalTow" :disabled="item.isDisable"/>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item  label="端口号1" prop="portTow">
                                    <a-input v-model="item.portTow" :disabled="item.isDisable"/>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item  label="GPRS卡号" prop="gprsCard" >
                                    <a-input v-model="item.gprsCard" :disabled="item.isDisable"/>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row type="flex" justify="center">
                            <a-col :span="8">
                                <a-form-model-item  label="终端IP2" prop="terminalThree">
                                    <a-input v-model="item.terminalThree" :disabled="item.isDisable"/>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item  label="端口号2" prop="portThree">
                                    <a-input v-model="item.portThree" :disabled="item.isDisable"/>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item  label="GPRS-VPN卡号" prop="gprsVpnCard">
                                    <a-input v-model="item.gprsVpnCard"  :disabled="item.isDisable"/>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="8">
                                <a-form-model-item  label="手机卡号">
                                    <a-input :disabled="item.isDisable"/>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item  label="运维单位名称">
                                    <a-input :disabled="item.isDisable"/>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item  label="运维单位联系人">
                                    <a-input :disabled="item.isDisable"/>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row type="flex" justify="center">
                            <a-col :span="24">
                                <a-form-model-item  label="备注" style="width: 93%">
                                    <a-input type="textarea" :disabled="item.isDisable"/>
                                </a-form-model-item>
                            </a-col>
                        </a-row>

                        <div class="putOnRecords">
                            <div class="putOnRecordsTitle">> 备案登记信息</div>
                            <div class="putOnRecordsContent">
                                <a-row type="flex" justify="center">
                                    <a-col :span="8">
                                        <a-form-model-item  label="适用性监测报告名称" >
                                            <a-input  :disabled="item.isDisable"/>
                                        </a-form-model-item>
                                    </a-col>
                                    <a-col :span="8">
                                        <a-form-model-item  label="设备出厂编号">
                                            <a-input :disabled="item.isDisable"/>
                                        </a-form-model-item>
                                    </a-col>
                                    <a-col :span="8">
                                        <a-form-model-item  label="代理商">
                                            <a-select :disabled="item.isDisable">
                                                <a-select-option value="暂无">
                                                    暂无
                                                </a-select-option>
                                            </a-select>
                                        </a-form-model-item>
                                    </a-col>
                                </a-row>
                                <a-row type="flex" justify="center">
                                    <a-col :span="8">
                                        <a-form-model-item  label="生产许可证编号">
                                            <a-input :disabled="item.isDisable"/>
                                        </a-form-model-item>
                                    </a-col>
                                    <a-col :span="8">
                                        <a-form-model-item  label="环保产品认证编号">
                                            <a-input :disabled="item.isDisable"/>
                                        </a-form-model-item>
                                    </a-col>
                                    <a-col :span="8">
                                        <a-form-model-item  label="接收信号类型" >
                                            <a-select :disabled="item.isDisable">
                                                <a-select-option value="暂无">
                                                    暂无
                                                </a-select-option>
                                            </a-select>
                                        </a-form-model-item>
                                    </a-col>
                                </a-row>
                                <a-row type="flex" justify="center">
                                    <a-col :span="8">
                                        <a-form-model-item  label="通讯协议" >
                                            <a-input :disabled="item.isDisable"/>
                                        </a-form-model-item>
                                    </a-col>
                                    <a-col :span="8">
                                        <a-form-model-item  label="设备型号">
                                            <a-input :disabled="item.isDisable"/>
                                        </a-form-model-item>
                                    </a-col>
                                    <a-col :span="8">
                                        <a-form-model-item  label="显示单元显示项目名称">
                                            <a-input :disabled="item.isDisable"/>
                                        </a-form-model-item>
                                    </a-col>
                                </a-row>
                                <a-row type="flex" justify="center">
                                    <a-col :span="8">
                                        <a-form-model-item  label="数字输入通道数量" >
                                            <a-input :disabled="item.isDisable"/>
                                        </a-form-model-item>
                                    </a-col>
                                    <a-col :span="8">
                                        <a-form-model-item  label="模拟量输入通道数量">
                                            <a-input :disabled="item.isDisable"/>
                                        </a-form-model-item>
                                    </a-col>
                                    <a-col :span="8">
                                        <a-form-model-item  label="开关量输入通道数量">
                                            <a-input :disabled="item.isDisable"/>
                                        </a-form-model-item>
                                    </a-col>
                                </a-row>
                                <a-row type="flex" justify="center">
                                    <a-col :span="8">
                                        <a-form-model-item  label="存储容量（KB）">
                                            <a-input :disabled="item.isDisable"/>
                                        </a-form-model-item>
                                    </a-col>
                                    <a-col :span="16">
                                        <a-form-model-item  label="备注" style="width: 90%">
                                            <a-input type="textarea" :disabled="item.isDisable"/>
                                        </a-form-model-item>
                                    </a-col>
                                </a-row>
                            </div>
                        </div>
                    </a-collapse-panel>
                </a-collapse>
            </a-form-model>
            <div style="height: 10px"></div>
        </template>
        <template v-if="!$attrs.isHide">
          <a-button  v-if="isShow" class="addPoint" @click="onAddPoint" type="primary" icon="plus-circle">新增</a-button>
        </template>

        <!-- 添加弹框 -->
        <a-modal v-model="addPoint" width="80%" title="新增数采仪" centered @cancel="()=>form = {}" :maskClosable="false" destroyOnClose>
            <a-form-model ref="form" layout="inline" :model="form" @cancel="()=>form = {}" :rules="basicRules">
                <a-collapse :activeKey="[1,2]">
                    <a-collapse-panel key="1" header = "数采仪" >

                        <a-row type="flex" justify="center">
                            <a-col :span="8">
                                <a-form-model-item  label="数采仪编码/MN号" prop="dataAcquisitionCode">
                                    <a-input v-model="form.dataAcquisitionCode" />
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item  label="数采仪型号" prop="dataAcquisitionModel">
                                    <a-input v-model="form.dataAcquisitionModel" />
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item  label="生产厂商" prop="creatFactoryName">
                                    <a-select v-model="form.creatFactoryName" >
                                        <a-select-option value="暂无">
                                            暂无
                                        </a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row type="flex" justify="center">
                            <a-col :span="8">
                                <a-form-model-item  label="数据传输方式" prop="sendDataType">
                                    <a-select v-model="form.sendDataType" >
                                      <a-select-option :value="detail.name" v-for="(detail,index) in sendDataType" :key="detail.id">
                                        {{detail.name}}
                                      </a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item  label="数据上报间隔(分钟)" prop="sendDataInterval" >
                                    <a-input v-model="form.sendDataInterval" />
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item  label="数据传输协议"  prop="sendDataAgreement" >
                                    <a-select v-model="form.sendDataAgreement" >
                                        <a-select-option :value="detail.name" v-for="(detail,index) in sendDataAgreement" :key="detail.id">
                                            {{detail.name}}
                                        </a-select-option>
                                    </a-select>

                                </a-form-model-item>
                            </a-col>
                        </a-row>
                      <a-row type="flex" justify="center">
                        <a-col :span="8">
                          <a-form-model-item  label="终端IP" prop="terminalOne">
                            <a-input v-model="form.terminalOne" />
                          </a-form-model-item>
                        </a-col>
                        <a-col :span="8">
                          <a-form-model-item  label="端口号" prop="portOne">
                            <a-input v-model="form.portOne" />
                          </a-form-model-item>
                        </a-col>
                        <a-col :span="8">
                          <a-form-model-item  label="访问密码" prop="visitPassword">
                            <a-input v-model="form.visitPassword"/>
                          </a-form-model-item>
                        </a-col>
                      </a-row>
                      <a-row type="flex" justify="center">
                        <a-col :span="8">
                          <a-form-model-item  label="终端IP1" prop="terminalTow">
                            <a-input v-model="form.terminalTow"/>
                          </a-form-model-item>
                        </a-col>
                        <a-col :span="8">
                          <a-form-model-item  label="端口号1" prop="portTow">
                            <a-input v-model="form.portTow" />
                          </a-form-model-item>
                        </a-col>
                        <a-col :span="8">
                          <a-form-model-item  label="GPRS卡号" prop="gprsCard" >
                            <a-input v-model="form.gprsCard" />
                          </a-form-model-item>
                        </a-col>
                      </a-row>
                      <a-row type="flex" justify="center">
                        <a-col :span="8">
                          <a-form-model-item  label="终端IP2" prop="terminalThree">
                            <a-input v-model="form.terminalThree" />
                          </a-form-model-item>
                        </a-col>
                        <a-col :span="8">
                          <a-form-model-item  label="端口号2" prop="portThree">
                            <a-input v-model="form.portThree" />
                          </a-form-model-item>
                        </a-col>
                        <a-col :span="8">
                          <a-form-model-item  label="GPRS-VPN卡号" prop="gprsVpnCard">
                            <a-input v-model="form.gprsVpnCard"  />
                          </a-form-model-item>
                        </a-col>
                      </a-row>
                        <a-row>
                            <a-col :span="8">
                                <a-form-model-item  label="手机卡号">
                                    <a-input />
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item  label="运维单位名称">
                                    <a-input />
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item  label="运维单位联系人">
                                    <a-input />
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row type="flex" justify="center">
                            <a-col :span="24">
                                <a-form-model-item  label="备注" style="width: 93%">
                                    <a-input type="textarea" />
                                </a-form-model-item>
                            </a-col>
                        </a-row>

                        <div class="putOnRecords">
                            <div class="putOnRecordsTitle">> 备案登记信息</div>
                            <div class="putOnRecordsContent">
                                <a-row type="flex" justify="center">
                                    <a-col :span="8">
                                        <a-form-model-item  label="适用性监测报告名称" >
                                            <a-input  />
                                        </a-form-model-item>
                                    </a-col>
                                    <a-col :span="8">
                                        <a-form-model-item  label="设备出厂编号">
                                            <a-input />
                                        </a-form-model-item>
                                    </a-col>
                                    <a-col :span="8">
                                        <a-form-model-item  label="代理商">
                                            <a-select >
                                                <a-select-option value="暂无">
                                                    暂无
                                                </a-select-option>
                                            </a-select>
                                        </a-form-model-item>
                                    </a-col>
                                </a-row>
                                <a-row type="flex" justify="center">
                                    <a-col :span="8">
                                        <a-form-model-item  label="生产许可证编号">
                                            <a-input />
                                        </a-form-model-item>
                                    </a-col>
                                    <a-col :span="8">
                                        <a-form-model-item  label="环保产品认证编号">
                                            <a-input />
                                        </a-form-model-item>
                                    </a-col>
                                    <a-col :span="8">
                                        <a-form-model-item  label="接收信号类型" >
                                            <a-select >
                                                <a-select-option value="暂无">
                                                    暂无
                                                </a-select-option>
                                            </a-select>
                                        </a-form-model-item>
                                    </a-col>
                                </a-row>
                                <a-row type="flex" justify="center">
                                    <a-col :span="8">
                                        <a-form-model-item  label="通讯协议" >
                                            <a-input />
                                        </a-form-model-item>
                                    </a-col>
                                    <a-col :span="8">
                                        <a-form-model-item  label="设备型号">
                                            <a-input />
                                        </a-form-model-item>
                                    </a-col>
                                    <a-col :span="8">
                                        <a-form-model-item  label="显示单元显示项目名称">
                                            <a-input />
                                        </a-form-model-item>
                                    </a-col>
                                </a-row>
                                <a-row type="flex" justify="center">
                                    <a-col :span="8">
                                        <a-form-model-item  label="数字输入通道数量" >
                                            <a-input />
                                        </a-form-model-item>
                                    </a-col>
                                    <a-col :span="8">
                                        <a-form-model-item  label="模拟量输入通道数量">
                                            <a-input />
                                        </a-form-model-item>
                                    </a-col>
                                    <a-col :span="8">
                                        <a-form-model-item  label="开关量输入通道数量">
                                            <a-input />
                                        </a-form-model-item>
                                    </a-col>
                                </a-row>
                                <a-row type="flex" justify="center">
                                    <a-col :span="8">
                                        <a-form-model-item  label="存储容量（KB）">
                                            <a-input />
                                        </a-form-model-item>
                                    </a-col>
                                    <a-col :span="16">
                                        <a-form-model-item  label="备注" style="width: 90%">
                                            <a-input type="textarea" />
                                        </a-form-model-item>
                                    </a-col>
                                </a-row>
                            </div>
                        </div>
                    </a-collapse-panel>
                </a-collapse>
            </a-form-model>
            <template slot="footer">
                <a-button type="primary" @click="onSubmit">确定</a-button>
            </template>
        </a-modal>
    </div>

</template>

<script>
    import buttonEvent from "@/views/components/mixin/buttonEvent";
    export default {
        props: {
            monitorId:{
                type: String,
                required: true
            },

        },
        mixins:[buttonEvent],
        name: "forInstrument",
        data(){
            return {
                sendDataType:[],  // 数据传输方式
                sendDataAgreement:[],   // 数据传输协议
                isShow:false,
                addPoint:false,
                basicForm:[],
                form:{
                    dataAcquisitionCode:'',
                    dataAcquisitionModel:'',
                    creatFactoryName:'',
                    sendDataType:'',
                    sendDataInterval:'',
                    sendDataAgreement:'',
                    creatBy:'',
                    monitorId:this.monitorId,
                    terminalOne:'',
                    terminalTow:'',
                    terminalThree:'',
                    portOne:'',
                    portTow:'',
                    portThree:'',
                    visitPassword:'',
                    gprsCard:'',
                    gprsVpnCard:''
                },

                emissionLaw:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,'其他'],
                labelCol:{
                    span: 8
                },
                basicRules:{
                    dataAcquisitionCode: [
                        { required: true, message: '请输入监控点编号', trigger: 'blur' }
                    ],
                    dataAcquisitionModel: [
                        { required: true, message: '请输入数采仪型号', trigger: 'blur' }
                    ],
                    sendDataInterval: [
                        { required: true, message: '请输入数据上报间隔', trigger: 'blur' }
                    ],

                },
            }
        },
        methods:{
            getAcquisitionList(){
                this.$api.getAcquisitionList(this.monitorId).then(res=>{
                    res.data.data.forEach(item=>{
                        item.isEditButton=true
                        item.isDisable=true
                    })
                   this.basicForm=res.data.data
                    if(this.basicForm.length==0){
                        this.isShow=true
                    }
                })
            },
            onAddPoint(){
                this.addPoint=true;
            },
            onCancel(index){
                let basic=this.$refs['basicForm'+index][0]
                console.log(basic)
                basic.resetFields();
                this.basicForm[index].isEditButton=!this.basicForm[index].isEditButton;
                this.basicForm[index].isDisable=!this.basicForm[index].isDisable;
            },
            onEdit(index){
              console.log(index)
              console.log(this.basicForm)
                this.basicForm[index].isEditButton=!this.basicForm[index].isEditButton;
                this.basicForm[index].isDisable=!this.basicForm[index].isDisable;
            },
            onDel(index){
                let _that = this;
                this.$confirm({
                    title: "是否删除采集仪编号【"+this.basicForm[index].dataAcquisitionCode+"】？",
                    onOk() {
                        _that.$api.removeAcquisitionList(_that.basicForm[index].id).then(res=>{
                            if(res.data.code==0){
                                _that.getAcquisitionList();
                                _that.$message.success('删除成功')
                            }else{
                                _that.$message.error(res.data.errorMessage)
                            }
                        })
                    },
                    onCancel() {
                        console.log("Cancel");
                    },
                    class: "delk",
                });
            },
            onSave(index){
                let basic=this.$refs['basicForm'+index][0]

                basic.validate(valid => {
                    if (!valid) {
                        return false;
                    }
                    this.$api.editAcquisitionList(this.basicForm[index]).then(res=>{
                        if(res.data.code==0){
                            this.cancelDispose(index);
                            this.$message.success('修改完成')
                          this.getAcquisitionList();
                        }else{
                            this.$message.error(res.data.errorMessage)
                        }
                    })
                });
            },
            onSubmit(){
                this.$refs.form.validate(valid => {
                    if (!valid) {
                        return false;
                    }
                    this.form.monitorId=this.monitorId
                    this.$api.addAcquisitionList(this.form).then(res=>{
                        if(res.data.code==0){
                            this.getAcquisitionList();
                            this.addPoint=false;
                            this.form={}
                          this.isShow=false
                            this.$message.success('添加成功')
                        }else{
                            this.$message.error(res.data.errorMessage)
                        }
                    })
                });
            },
            initData(){
              this.$api.getdictionaryList("数据传输方式").then(res=>{
                if(res.data.code === 0){
                  this.sendDataType = res.data.data
                }else {
                  this.$message.info(res.data.errorMessage)
                }

                console.log(res.data)
              })
              this.$api.getdictionaryList("数据传输协议").then(res=>{
                if(res.data.code === 0){
                  this.sendDataAgreement = res.data.data
                }else {
                  this.$message.info(res.data.errorMessage)
                }

                console.log(res.data)
              })
            }
        },
      mounted() {
        this.initData()
      },
      watch:{
            monitorId(val){
                this.$nextTick(()=>{
                    this.getAcquisitionList();
                    this.$forceUpdate()
                })
            }
        }
    }
</script>

<style scoped lang = "scss">
    @import "../../components/style/style.scss";
    .putOnRecords{
        position: relative;
    }
    .putOnRecordsTitle{
        padding-left: 22px;
        position: absolute;
        left: -18px;
        right: -18px;
        height: 46px;
        border: 1px solid #e8e8e8;
        line-height: 46px;
        font-size: 16px;
        background: transparent;}
    .putOnRecordsContent{
        padding-top: 50px;
    }
    .addPoint{
        color: rgba(255, 255, 255, 0.6);
        width: 200px;
        height: 50px;
        position: relative;
        margin-left: -100px;
        left: 50%;
        margin-top: 200px;
        margin-bottom: 200px;
    }
    .addPoint ::v-deep .ant-calendar-picker-icon, .addPoint ::v-deep .anticon{
        color: rgba(255, 255, 255, 0.6);
    }
</style>
